// 数据监测
class Observer{
    constructor(value){
        this.value = value
        // 记录数据已经被转成可响应的
        if(Array.isArray(value)){ // 处理数组逻辑

        }else{
            this.walk(value)
        }
        def(value, '__ob__', this)
    }
    walk(obj){
        const keys = Object.keys(obj)
        for(let i=0; i<keys.length; i++){
            defineReactive(obj, keys[i])
        }
    }
}

// 将一个对象中的某个值变成响应式的
function def(obj, key, value){
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get(){
            console.log(this)
            return value
        },
        set(val){
            value = val
        }
    })
}

// 将一个对象数据变成响应式的
function defineReactive(obj, key, val){
    if(arguments.length===2){
        val = obj[key]
    }
    if(typeof val === 'object'){
        new Observer(val)
    }
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get(){
            console.log(`${key}属性被读取了`);
            return val;
        },
        set(newVal){
            if(val === newVal){
                return
            }
            console.log(`${key}属性被修改了`);
            val = newVal;
        }
    })
}
let car = {
    brand: '宝马',
    price: 50000,
    pec: {
        color: '红色',
        size: '7*5'
    }
}
new Observer(car)
console.log(car.pec)

console.log(car)